<script setup lang="ts">
// 认证页面布局
import { RouterView } from 'vue-router'
</script>

<template>
  <div class="auth-layout">
    <div class="auth-container">
      <div class="auth-logo">
        <!-- 使用临时SVG替代图片 -->
        <svg xmlns="http://www.w3.org/2000/svg" width="180" height="40" viewBox="0 0 180 40">
          <text x="5" y="30" font-family="Arial" font-size="24" font-weight="bold" fill="#1890ff">
            水印去除工具
          </text>
        </svg>
      </div>
      
      <div class="auth-content">
        <RouterView />
      </div>
      
      <div class="auth-footer">
        <p class="text-gray-500 text-sm">
          © 2023-{{ new Date().getFullYear() }} 水印去除工具 - 版权所有
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.auth-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  padding: 1rem;
}

.auth-container {
  width: 100%;
  max-width: 1200px;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.auth-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.auth-footer {
  text-align: center;
  margin-top: 2rem;
  padding: 1rem 0;
}
</style> 